<template>

    <van-skeleton title :row="3" v-if="status" />

    <div v-else>
        <div>
            <van-nav-bar title="xx首页商城" fixed />
        <div style="height: 45px;"></div>

        <van-tabs v-model:active="active" animated>
            <van-tab title="首页商城"></van-tab>
            <van-tab title="衣服选购"></van-tab>
            <van-tab title="特价商品"></van-tab>
            <van-tab title="游戏商城"></van-tab>
            <van-tab title="化妆商城"></van-tab>
            <van-tab title="鞋子商城"></van-tab>
        </van-tabs>

        <search></search>

        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        </van-grid>
        </div>

<div class="pbl">
    <div style="border: 1px solid black; width: 150px;height: 250px;"><img src="../home/商品首页_03.jpg" alt="">  <span>最新商品价格</span>  <br>  <span>新款商品</span> <br> <span>￥1234</span> </div>
    <div style="border: 1px solid black; width: 150px;height: 200px;"><img src="../home/商品首页_03.jpg" alt="">  <span>商品价格</span>  <br>  <span>新款商品</span> <br> <span>￥1234</span> </div>
    <div style="border: 1px solid black; width: 150px;height: 260px;"><img src="../home/商品首页_03.jpg" alt="">  <span>最低商品价格</span>  <br>  <span>新款商品</span> <br> <span>￥1234</span> </div>
    <div style="border: 1px solid black; width: 150px;height: 250px;"><img src="../home/商品首页_03.jpg" alt="">  <span>商品价格</span>  <br>  <span>火爆新款商品</span> <br> <span>￥1234</span> </div>
    <div style="border: 1px solid black; width: 150px;height: 290px;"><img src="../home/商品首页_03.jpg" alt="">  <span>商品价格</span>  <br>  <span>新款商品</span> <br> <span>￥1234</span> </div>
    <div style="border: 1px solid black; width: 150px;height: 270px;"><img src="../home/商品首页_03.jpg" alt="">  <span>商品价格</span>  <br>  <span>便宜卖新款商品</span> <br> <span>￥1234</span> </div>
    
</div>
    </div>
</template>

<script setup>

import search from '@/components/search.vue'
import { catitemsApi } from '@/api/api'
import { ref } from 'vue'
let status = ref(true)
setTimeout(() => {
    status.value = false
}, 500);

let catitemsApiData = ref([])
catitemsApi().then((res => {
    console.log('宫格数据', res);
    catitemsApiData.value = res.data.message
}))
</script>

<style>
.pbl{
     column-count: 2;
        column-gap: 20px;
    
    div{
       
        margin-left: 30px;
        margin-bottom: 20px;
    }
}</style>